<template>
  <div class="college_grades_main">
    <!--    顶部导航条-->
    <navheader></navheader>
<!--    主体内容-->
    <div class="row main p-5" style="height: 1000px;margin-top: 80px">
<!--      左侧菜单栏-->
      <div class="col-md-4">
        <div class="row pl-3">
          <div class="" style="background-color:#3f7e74;width: 8px;height: 30px"></div>
          <div class="pl-2"><span style="color: #3f7e74;font-weight: bold;font-size: 20px">考 研 年 份 的 选 择</span></div>
        </div>
<!--        搜索框-->
        <div class="row input_class pt-3" style="width: 270px">
          <div class="pl-3">

            <el-select v-model="find_year" @change="selectChanged">
              <el-option v-for="(grades) in all_years" :label="grades.grades_year"
                         :value="grades.grades_year"
                         :key="grades.grades_year"></el-option>
            </el-select>

          </div>
<!--          <div class="col-md-4">-->
<!--            <el-button @click="find_grades">搜索</el-button>-->
<!--          </div>-->
        </div>
        <div class="pt-4">
          <div class="btnclass btn" type="btn"
               :style="academic_dynamicStyle"
               @click="change_academic()">
            <i class="fa fa-graduation-cap"></i>
            学 术 学 位<br/>
            <small>Academic&nbsp;&nbsp;degrees&nbsp;&nbsp;&nbsp;&nbsp;</small>
          </div>
          <div class="btnclass btn" type="btn"
               :style="profession_dynamicStyle"
               @click="change_profession()">
            <i class="fa fa-graduation-cap" ></i>
            专 业 学 位<br/>
            <small>Professional&nbsp;&nbsp;degrees</small>
          </div>
        </div>
      </div>
<!--      右侧内容-->
      <div class="table_grades col-md-9">
        <router-view></router-view>
      </div>
    </div>
    <!--    底部导航条-->
    <myfooter></myfooter>
  </div>
</template>

<script>
import myfooter from '../../myfooter'
import navheader from '../../navheader'
import noInfo from '@/assets/noFile.png'
import {getAllYears} from '@/api/College'

export default {
  name: "college_grades",
  components:{
    myfooter,
    navheader
  },
  data(){
    return{
      imgs:{
        noInfo
      },
      nullContainer:"暂无数据~",
      academic_dynamicStyle: {}, //内联样式控制
      profession_dynamicStyle: {}, //内联样式控制
      brightStyle: {
        //未按下白色
        background:
            "white",
        color: "#3f7e74"
      },
      darkStyle: {
        //按下绿色
        background:
            "#B7C1AC",
        color: "white"
      },
      grades_sort:1,
      find_year:2022,
      all_years:[],


    }

  },
  methods:{

    change_academic(){

      this.grades_sort=1;
      this.academic_dynamicStyle = this.darkStyle;
      this.profession_dynamicStyle=this.brightStyle;
      this.$router.push({
        path:'/College_Grades/Academic_Grades',
        query:{
          grades_year:this.find_year,
          grades_sort:this.grades_sort,
        }
      });



    },
    change_profession(){

      this.profession_dynamicStyle = this.darkStyle;
      this.academic_dynamicStyle=this.brightStyle;
      this.grades_sort=2;
      this.$router.push({
        path:'/College_Grades/Profession_Grades',
        query:{
          grades_year:this.find_year,
          grades_sort:this.grades_sort,
        }

      });

    },
    selectChanged(val){

      this.find_year = val;

      if(this.$router.history.current.path =='/College_Grades/Profession_Grades'){

        this.profession_dynamicStyle = this.brightStyle;
        this.academic_dynamicStyle=this.darkStyle;
        this.grades_sort=1;
        this.$router.push({
          path:'/College_Grades/Academic_Grades',
          query:{
            grades_year:this.find_year,
            grades_sort:this.grades_sort,
          }

        });

      }
      else if(this.$router.history.current.path =='/College_Grades/Academic_Grades'){

        this.profession_dynamicStyle = this.darkStyle;
        this.academic_dynamicStyle=this.brightStyle;

        this.grades_sort=2;
        this.$router.push({
          path:'/College_Grades/Profession_Grades',
          query:{
            grades_year:this.find_year,
            grades_sort:this.grades_sort,
          }

        });

      }

    },
    //获取年份
    init(){

      getAllYears({}).then(res=>{
        this.all_years=res.data.years;
      })

    },

  },
  created() {

    this.grades_sort=1;
    this.academic_dynamicStyle = this.darkStyle;
    this.profession_dynamicStyle=this.brightStyle;
    this.$router.push({
      path:'/College_Grades/Academic_Grades',
      query:{
        grades_year:this.find_year,
        grades_sort:this.grades_sort,
      }
    });

    let _this=this;
    _this.init();


  }

}
</script>

<style scoped>
.titlefontclass{
  font-size: 20px;
}
/*.input_class:hover{*/
/*  background-color:#B7C1AC;*/
/*}*/
.btnclass{
  font-size: 22px;
  background-color: white;
  padding: 50px;
  font-weight: bold;
  color:#3f7e74;
}
.btnclass:hover{
  background-color:#B7C1AC;
  color: white;
}
.table_grades{
  margin-left: -180px;
  /*margin-top: 120px;*/

}

</style>
